<route lang="json5" type="page">
{
  layout: 'default',
  navigationStyle: 'custom',
}
</route>

<template>
  <view class="pt-3 px-3 text-sm pb-3">
    <view class="flex items-center p-2 bg-white rounded-2 font-bold">
      <image class="h-4 w-4 mr-1" :src="robotIcon" mode="scaleToFill" />
      AI 智能日报
      <!-- （{{ getToday() }}） -->
    </view>

    <view class="p-3 bg-white rounded-2 mt-3 overflow-hidden flex flex-col" style="height: 400rpx">
      <view class="font-bold">月度指标完成：</view>
      <view class="flex-1 shrink-0">
        <l-echart ref="barChartRef" />
      </view>
    </view>

    <view class="p-3 bg-white rounded-2 mt-4 text-sm">
      <view class="font-bold">基础物业服务：</view>
      <view class="flex justify-between mt-3">
        <view class="w-1/2 flex center">
          <wd-circle v-model="current1" :strokeWidth="20" :speed="300" color="#34d19d">
            <slot>
              <view>
                <view class="text-xs">巡查执行</view>
                <view>{{ current1 }}%</view>
              </view>
            </slot>
          </wd-circle>
        </view>
        <view class="text-left w-[40vw] flex flex-col justify-center">
          <view>当日巡检路线：2个</view>
          <view>点位数：320个</view>
          <view>任务数：10个</view>
          <view>未完成：0个</view>
        </view>
      </view>
      <view class="flex justify-between mt-5">
        <view class="w-1/2 flex center">
          <wd-circle v-model="current" :strokeWidth="20" :speed="300" color="#f0883a">
            <slot>
              <view>
                <view class="text-xs">工单完成</view>
                <view>{{ current }}%</view>
              </view>
            </slot>
          </wd-circle>
        </view>
        <view class="text-left w-[40vw] flex flex-col justify-center">
          <view>当日新增：10个</view>
          <view>当日完成：8个</view>
          <view>逾期工单：0个</view>
          <view>未完成：2个</view>
        </view>
      </view>
    </view>

    <view class="p-3 bg-white rounded-2 mt-3">
      <view class="font-bold flex align-center">
        <span class="text-[#f0cf1d] mr-3">金牌管家：刘伟</span>
        评分95排名第一！
      </view>
    </view>

    <view class="p-3 bg-white rounded-2 mt-3">
      <view class="font-bold">舆情事件：无</view>
    </view>
    <view class="p-3 bg-white rounded-2 mt-3">
      <view class="font-bold">高频问题：</view>
      <view class="pt-2 leading-relaxed pb-2">
        <view>超过3个业主反馈南门停车拥堵问题讨论较多，需引起重视！。</view>
      </view>
      <view class="mt-2">
        <view class="bg-blue-50 p-3 rounded-lg">
          <view class="font-medium mb-2 flex text-black">
            <image class="w-5 h-5 mr-2" src="/static/svg/jiqiren.svg" mode="scaleToFill" />
            <text>AI改进建议：</text>
          </view>
          <view class="text-sm text-gray-600">用废旧轮胎刷漆制作隔离墩（成本约 30 元 / 个）</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import robotIcon from '@/static/images/robot-icon.gif'
import { useBarEcharts, useLineEcharts } from './echartsData'

import dayjs from 'dayjs'
import { set } from 'lodash-es'

const [barChartRef, barOption, barDraw] = useBarEcharts()

// 初始化 柱状图表
const initBarChart = () => {
  set(barOption.value, 'series.data', [90, 82, 85, 90])
  barDraw()
}

onMounted(() => {
  initBarChart()
})

const current1 = ref(100)
const current = ref(80)

const getToday = () => {
  const now = dayjs().format('YYYY-MM-DD')
  return now
}
</script>

<style lang="scss" scoped>
//
</style>
